{
 
    const select = { 
        normal : {
            elementTemplate : `
                        <div class="form-group">
                            <label>{{title}}</label>
                            <select class="form-control" v-model="value">
                                    <option :value="index" v-for="(item, index) in items">{{item.text}}</option> 
                            </select>
                        </div>
            `,
            prototypeTemplate : `
                        <div class="form-group">
                            <label >下拉框的标题:</label>
                            <input type="text" class="form-control input-sm" v-model="title">
                        </div>
                        <div class="form-group">
                            <label >下拉框的标题:</label>
                            <input type="text" class="form-control input-sm" v-model="title">
                        </div>
                        
                        <a class="btn btn-default btn-xs" href="javascript:void('');" role="button" v-on:click="items.push({val:items.length+1,text:'new Option'})">Add</a>

                        <div class="form-group"> 
                            <div class="input-group" v-for="(item, index) in items" style="margin-top:5px;">
                            <input type="text" class="form-control input-sm" v-model="item.text" >
                            <span class="input-group-btn">
                                <button type="button" class="close" aria-label="Close" v-on:click="items.splice(index, 1)"><span aria-hidden="true">&times;</span></button>
                            </span>
                            </div>
                        </div>
            `,
            _constructor : function () {
                return {
                    data: {
                        name : 'down',
                        value : '0',
                        title: '下拉框',
                        items : [{
                            text : 'option1'
                        },{
                            text : 'option2'
                        }]
                    },

                    methods: {
                        getValue : function () {
                            return this.value;
                        },
                        
                        getField : function () {
                            return this.name;
                        }
                    }
                }
            }
        },
        area : {
            elementTemplate : ` 
                        <div data-replace='select.area'>
                            <div class="form-group">
                                <label >{{title}}：</label>
                            </div> 
                            
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;">
                                        <option>{{items[0]}}</option> 
                                </select>
                            </div>
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;">
                                        <option>{{items[1]}}</option> 
                                </select>
                            </div>
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;">
                                        <option>{{items[2]}}</option> 
                                </select>
                            </div>
                        </div>
            `,
            prototypeTemplate : `
                        <div class="form-group">
                            <label >请输入字段名(唯一):</label>
                            <input type="text" class="form-control input-sm" v-model="name">
                        </div>
                        <div class="form-group">
                            <label >提示标题:</label>
                            <input type="text" class="form-control input-sm" v-model="title">
                        </div>

            `,

            realTemplate : `
                        <label >{{title}}：</label>
                        <div data-toggle="distpicker" :id="name">
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;"></select>
                            </div>
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;"></select>
                            </div>
                            <div class="form-group" style="display:inline-block;"> 
                                <select class="form-control" style="width: auto;"></select>
                            </div>
                        </div>
            `,

            _constructor : function () {
                return {
                    data: {
                        name : 'distpicker1',
                        title: '请选择您的地址',
                        items : ['---- 选择省 ----','---- 选择市 ----','---- 选择区 ----']
                    },

                    mounted : function () { 
                        if (typeof $ != 'undefined') {
                            let _this = this; 
                            $(function() {
                                window[_this.name] = $('#'+_this.name).distpicker({
                                    province: _this.items[0],
                                    city: _this.items[1],
                                    district: _this.items[2]
                                });
                            });
                        }
                    },

                    methods: { 
                        getValue : function () { 
                            if (typeof $ != 'undefined') {
                                let val = [];
                                let selectObjs = $('#'+this.name).find('select');
                                selectObjs.length
                                for (var i = 0; i < selectObjs.length; i++) {
                                   val.push($('#'+this.name).find('select:eq('+ i +')').val());
                                }
                                return val.toString();
                            } else {
                                return '';
                            }
                        },
                        
                        getField : function () {
                            return this.name;
                        }
                    }
                }
            }
        }


    }


    if ( window.TEMPLATE && !window.TEMPLATE.select ) {
        window.TEMPLATE.select = select
    }
}